<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="description" content="不超过150个字符" />
    <meta name="keywords" content="" />
    <meta content="caibaojian" name="author" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <link rel="stylesheet" href="../static/css/allCategories.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
    <!-- 设计稿 1rem = 100px -->
    <script src="../static/js/flexible.js"></script>
    <!-- 滚动插件 -->
    <script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>
    <title>所有商品</title>
</head>
    <div class="categories">
        <!-- 头部导航 -->
        <header class="header">
            <div class="top-bar flex-r-b">
                <span class="left goback"></span>
                <div class="search flex-r-b">
                    <span class="icon"></span>
                    <input type="search" placeholder="搜索"/>
                </div>
            </div>
            <!-- 分类 -->
            <div class="nav-wrapper">
                <!-- 一级分类 -->
                <div class="nav-bar1-wrapper">
                    <div class="nav-bar1">
                        <span class="all active">全部</span>
                        <span class=''>法式面包</span>
                        <span class=''>法式面包</span>
                        <span class=''>法式面包</span>
                        <span class=''>法式面包</span>
                        
                    </div>
                </div>
                <!-- 二级分类 -->
                <div class="nav-bar2-wrapper">
                    <div class="nav-bar2">
                        <span class="all active">全部</span>
                        <span>分类二</span>
                        <span>分类一</span>
                        <span>分类一</span>
                        <span>分类一</span>
                    </div>
                </div>
            </div>
        </header>
        <!-- 分类列表 -->
        <div class="list">
            <div class="wrapper flex-r-b">
                <div class="card">
                    <a class="pic" href='./detail.html'>
                        <img src="../../static/images/index/img_2.png" alt="">
                    </a>
                    <div class="bottom flex-r-b">
                        <div class="text">
                            <p class="ellipsis">法式布雷鲜花蛋糕123131313</p>
                            <p class="price ellipsis">￥198/6寸</p>
                        </div>
                        <div class="add" @click.stop='showAdd'>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <a class="pic" href='./detail.html'>
                        <img src="../../static/images/index/img_2.png" alt="">
                    </a>
                    <div class="bottom flex-r-b">
                        <div class="text">
                            <p class="ellipsis">法式布雷鲜花蛋糕123131313</p>
                            <p class="price ellipsis">￥198/6寸</p>
                        </div>
                        <div class="add">
                        </div>
                    </div>
                </div>
                <div class="card">
                    <a class="pic" href='./detail.html'>
                        <img src="../../static/images/index/img_2.png" alt="">
                    </a>
                    <div class="bottom flex-r-b">
                        <div class="text">
                            <p class="ellipsis">法式布雷鲜花蛋糕123131313</p>
                            <p class="price ellipsis">￥198/6寸</p>
                        </div>
                        <div class="add" @click.stop='showAdd'>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <a class="pic" href='./detail.html'>
                        <img src="../../static/images/index/img_2.png" alt="">
                    </a>
                    <div class="bottom flex-r-b">
                        <div class="text">
                            <p class="ellipsis">法式布雷鲜花蛋糕123131313</p>
                            <p class="price ellipsis">￥198/6寸</p>
                        </div>
                        <div class="add" @click.stop='showAdd'>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="list">
            <div class="wrapper flex-r-b">
                <div class="card">
                    <a class="pic" href='./detail.html'>
                        <img src="../../static/images/index/img_2.png" alt="">
                    </a>
                    <div class="bottom flex-r-b">
                        <div class="text">
                            <p class="ellipsis">法式布雷鲜花蛋糕123131313</p>
                            <p class="price ellipsis">￥198/6寸</p>
                        </div>
                        <div class="add" @click.stop='showAdd'>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <a class="pic" href='./detail.html'>
                        <img src="../../static/images/index/img_2.png" alt="">
                    </a>
                    <div class="bottom flex-r-b">
                        <div class="text">
                            <p class="ellipsis">法式布雷鲜花蛋糕123131313</p>
                            <p class="price ellipsis">￥198/6寸</p>
                        </div>
                        <div class="add" @click.stop='showAdd'>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <a class="pic" href='./detail.html'>
                        <img src="../../static/images/index/img_2.png" alt="">
                    </a>
                    <div class="bottom flex-r-b">
                        <div class="text">
                            <p class="ellipsis">法式布雷鲜花蛋糕123131313</p>
                            <p class="price ellipsis">￥198/6寸</p>
                        </div>
                        <div class="add" @click.stop='showAdd'>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <a class="pic" href='./detail.html'>
                        <img src="../../static/images/index/img_2.png" alt="">
                    </a>
                    <div class="bottom flex-r-b">
                        <div class="text">
                            <p class="ellipsis">法式布雷鲜花蛋糕123131313</p>
                            <p class="price ellipsis">￥198/6寸</p>
                        </div>
                        <div class="add" @click.stop='showAdd'>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部弹窗 添加类show 进场动画 移除出场-->
        <div class="size-wrapper" >
            <!-- 弹窗内容 -->
            <div class="content">
                <div class="top-bar flex-r-b">
                    <span>单价：￥198.00</span>
                    <span class="close"></span>
                </div>
                <div class="icon flex-r-b">
                    <!-- 加类toCart 动画 -->
                    <div class="left animate1"></div>
                    <div class="right flex-c-b">
                        <p>1件商品</p>
                        <p>含五件餐具</p>
                        <p>适合4-6人分享</p>
                    </div>
                </div>
                <div class="size-box">
                    <div class="title">规格选择</div>
                    <div class="flex-r-b">
                        <label class="radio-label" for='size1'>
                            <input type="radio" name='size' id='size1'/>
                            <span class="size-checked">6寸 15cmX15cm</span>
                        </label>
                        <label class="radio-label" for='size2'>
                            <input type="radio" name='size' id='size2'/>
                            <span class="size-checked">6寸 15cmX15cm</span>
                        </label>
                        <label class="radio-label" for='size3'>
                            <input type="radio" name='size' id='size3'/>
                            <span class="size-checked">6寸 15cmX15cm</span>
                        </label> 
                    </div>
                </div>
                <div class="bottom-bar flex-r-b">
                    <div class="cart">
                        <span class="count">8</span>
                    </div>
                    <div class="btn addToCart" >加入购物车</div>
                    <div class="btn">立即购买</div>
                </div>
            </div>
        </div>
    </div>
<body>
<script>
    window.onload = function(){
        goBack()
        toggleSize()
        animateToCart()
        toggleNav2()
    }
    // 路由返回
    function goBack(){
        document.querySelector('.goback').onclick = function(){
            window.history.go(-1)
        }
    }
    // 二级分类 显示
    function toggleNav2(){
        var wrapper = document.querySelector('.nav-wrapper')
        var flag = false
        var nav1 = document.querySelectorAll('.nav-bar1>span')
        var i = 0;
        nav1.forEach(function(nav,index){
            nav.onclick = function(e){
                if(i === index){
                    flag = !flag
                }else{
                    flag = true
                    nav1[i].classList.remove('active')
                    i = index
                    nav1[i].classList.add('active')
                }
                if(!flag) {
                    wrapper.classList.remove('show2')
                    return
                }
                wrapper.classList.add('show2')
            }
        })
    }
    // 弹窗动画
    function toggleSize(){
        var add = document.querySelector('.add')
        var wrapper = document.querySelector('.size-wrapper')
        var content = document.querySelector('.size-wrapper>.content')
        var close = document.querySelector('.close')
        add.onclick = function () {
            wrapper.classList.add('show')
        }
        content.onclick = function(e){
            e.stopPropagation()
        }
        content.ontouchmove = function (e){
            return false
        }
        close.onclick = function(){
            wrapper.classList.remove('show')
        }
        wrapper.onclick = function(e){
            wrapper.classList.remove('show')
        }
        wrapper.ontouchmove = function(e){
            return false
        }
    }

    //加入购物车动画
    function animateToCart(){
        var btn = document.querySelector('.addToCart')
        var animate1 = document.querySelector('.animate1')
        var animate2 = document.querySelector('.count')
        var wrapper = document.querySelector('.size-wrapper')
        var flag = false
        btn.onclick = function(e){
            e.stopPropagation()
            if(flag) return
            flag = true
            animate1.classList.add('toCart')
            animate2.classList.add('scaleCount')
            setTimeout(function() {
                flag = false
                animate1.classList.remove('toCart')
                animate2.classList.remove('scaleCount')
                wrapper.classList.remove('show')
            }, 1100);
        } 
    }

</script>
</body>

</html>